import { Link, useNavigate } from "react-router-dom";
import { Form, Input, Button, Checkbox } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";

import "./index.css";

const Login = () => {
  let navigate = useNavigate();

  const onFinish = (values: any) => {
    console.log("Success:", values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  const submit = () => {
    navigate("/home/task-center");
  };

  return (
    <Form
      name="normal_login"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      className="login-form"
    >
      <Form.Item
        name="username"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Input
          prefix={<UserOutlined className="site-form-item-icon" />}
          placeholder="账号"
        />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[{ required: true, message: "Please input your password!" }]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="密码"
        />
      </Form.Item>

      <Form.Item valuePropName="checked" noStyle>
        <Checkbox>记住当前用户</Checkbox>

        <Link to="forgot" className="login-form-forgot">
          忘记密码
        </Link>
      </Form.Item>

      <Form.Item>
        <Button
          type="primary"
          className="login-form-button"
          htmlType="submit"
          onClick={submit}
        >
          登陆
        </Button>
        <Link to="register" className="login-form-register">
          立即注册!
        </Link>
      </Form.Item>
    </Form>
  );
};

export { Login };
